@import '@/lib/reset.scss';

.container{
  @include rect(1200px,auto);
  .Information {
    @include rect(100%, 140px);
    position: relative;
    dl {
      @include rect(100%, 100%);
      @include flexbox();
      dt{
        float: left;
        @include rect(170px,100%);
        img{
          @include rect(120px, 120px);
          margin:10px 20px;
        }
      }
      dd {
        float: left;
        @include flex();
        .name {
          @include rect(100%, 22px);
          margin:10px 0;
          h4{
            color:#333;
            font-size: 18px;
            line-height: 22px;
            float: left;
            margin-right:8px;
          }
          span{
            float: left;
            line-height: 22px;
            a{
              color:#E91E63;
              font-size: 10px;
            }
          }
        }
        .vip{
          @include rect(100%, 14px);
          overflow: hidden;
          margin:10px 0;
          label{
            font-size: 12px;
            float: left;
            margin-right:10px;
          }
          span{
            font-size: 12px;
            float: left;
            a{
              color:#E91E63;
            }
          }
        }
        .integral{
          @include rect(100%, 15px);
          margin:15px 0;
          label{
            font-size: 12px;
            float: left;
            margin-right:10px;
          }
          p{
            margin-right:8px;
          }
          p:nth-of-type(1){
            @include rect(280px,15px);
            border:1px solid #ccc;
            float: left;
            span{
              font-size: 8px;
              line-height: 15px;
              float: right;
              margin-right:5px;
            }
          }
          p:nth-of-type(2){
            @include rect(32px,15px);
            background:#E91E63;
            float: left;
            font-size: 10px;
            line-height: 15px;
            text-align: center;
            color:#fff;
          }
          p:nth-of-type(3){
            @include rect(59px,15px);
            float: left;
            a {
              color:#E91E63;
            }
          }
        }
        .userstat{
          @include rect(100%, 16px);
          p{
            font-size: 16px;
            line-height: 16px;
            margin-right:6px;
            float: left;
          }
          span{
            color:#E91E63;
            float:left;
            line-height: 16px;
            margin-right:20px;
          }
        }
      }
    }
    .bells{
      @include rect(120px, 40px);
      background:#E91E63;
      position: absolute;
      right:40px;
      top:50px;
      p{
        @include rect(100%,100%);
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        color:#fff;
        
      }
    }
  }
  .MyListen{
    min-height: 120px;
    // :after{
    //   content: ".";display: block;clear:both;height:0;overflow: hidden;visibility: hidden;
    // }
    .my_check {
      @include rect(90%, 100%);
      margin:0 auto;
      .recent_listen {
        @include rect(100%, 80%);
        ul {
          @include rect(100%,100%);
          li{
            @include rect(45%, 42px);
            float: left;
            margin-right:5%;
            @include flexbox();
            @include align-items();
            // background:#f00;
            input{
              float: left;
            }
            i{
              float: left;
              margin:0 10px;
              width:20px;
            }
            p {
              float: left;
              width:450px;
              // margin-right:50%;
            }
            span {
              float: right;
              width:50px;
            }
          }
        }
      }
      .check_action{
        @include rect(100%, 20%);
        @include flexbox();
        @include align-items();
        margin:10px 0px;
        input{

        }
        span{
          margin:0 20px 0px 10px;
        }
      }
    }
  }
  .MyCollect{
    @include rect(100%, 412px);
    // min-height: 265px;
    // :before{
    //   content: ".";display: block;clear:both;height:0;overflow: hidden;visibility: hidden;
    // }
    .collect_kind{
      @include rect(90%, 40px);
      margin:0 auto;
      ul {
        li{
          @include rect(120px, 36px);
          float: left;
          margin-right:36px;
          a{
            @include rect(100%, 100%);
            display: inline-block;
            color:#333;
            @include flexbox();
            @include align-items();
            @include justify-content();
            font-size: 16px;
            border-bottom:2px solid transparent;
            &:hover, &.active{
              border-color:#E91E63;
            }
          }
        }
      }
    }
  }
  .MySongList{
    @include rect(100%, 412px);
    // background:violet;
  }
  .MyVideo{
    @include rect(100%, 412px);
    // background:pink;
  }
  .DigitalAlbum{
    @include rect(100%, 412px);
    // background:coral;
  }
  .MyBell{
    @include rect(100%, 412px);
    // background:skyblue;
    .my_title {
      h2{width:130px;float:left;}
      span{
        float: left;
        margin-top:5px;
        a{
          color:#E91E63;
        }
      }
    }
  }
  .my_title{
    @include rect(100%, 24px);
    padding:30px;
    h2{
      font-size: 24px;
      line-height: 24px;
      color: #333;
    }
  }
  .collect_con{
      @include rect(90%, 310px);
      // background:yellow;
      margin:0 auto;
      background:#eee;
      position: relative;
      overflow: hidden;
      img{
        @include rect(168px, 179px);
        position: absolute;
        left:0;right:0;top:0;bottom:0;
        margin:20px auto;
      }
      p{
        height:20px;
        width:100%;
        text-align: center;
        margin-top:200px;
        a{
          color:#E91E63;
        }
      }
    }
    // 我的收藏——歌曲
    .havecollect{
      // background:#f00;
        @include rect(90%, 200px);
        margin:0 auto;
        
        ul {
          @include rect(100%,100%);
          overflow: hidden;
          li{
            @include rect(45%, 42px);
            float: left;
            margin-right:5%;
            @include flexbox();
            @include align-items();
            // background:#f00;
            input{
              float: left;
            }
            i{
              float: left;
              margin:0 10px;
              width:20px;
            }
            p {
              float: left;
              width:450px;
              // margin-right:50%;
            }
            span {
              float: right;
              width:50px;
            }
          }
        }
      }
}

// 歌单 专辑
.collects{
  @include rect(100%, auto);
  // background:#f00;
  ul {
    @include rect(90%, 90%);
    margin:10px auto 0;
    @include flexbox();
    overflow: hidden;
    li{
      float: left;
      @include rect(225px, 270px);
      margin-right:20px;
      position: relative;
      // background:yellow;
      input{
        position: absolute;
        top:5px;
        right:5px;
      }
      span{
        width:120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        font-size: 12px;
        color:#555;
      }
      i{
        font-size: 12px;
        float: right;
        color:#555;
        margin-right:10px;
        .iconfont{
          margin-right:3px;
        }
      }
    }
  }
  .btn{
    margin-left:70px;
    margin-top:5px;;
  }
}
// 视频

//  按钮
.btn{
  // float: left;
  @include rect(140px, 46px);
  border:1px solid #ccc;
  background:#fff;
  font-size: 18px;
  color:#333;
  margin:20px;
}
.btn:hover{
  background:#E91E63;
  border-color:#E91E63;
  color:#fff;
}